<!-- 定制开发请联系客服微信：csmszf -->
<template>
	<view class="used-msg-page">
		<view class="used-msg-container">
			<view class="used-msg-box flex flex-col">
				<view class="row-cen-sta mb-2">
					<view>
						<image src="/static/imgs/msg/message.png" class="icon-img-32"></image>
					</view>
					<view class="ml-2">
						<view class="font-bold">平台消息</view>
						<view>你有新的订单，注意查看</view>
					</view>
				</view>
				<view class="px-2 bg-color h-px"></view>
				<view class="row-cen-sta mt-2">
					<view>
						<image src="/static/imgs/msg/fabulous.png" class="icon-img-32"></image>
					</view>
					<view class="ml-2">
						<view class="font-bold">互动消息</view>
						<view>小可爱关注了你</view>
					</view>
				</view>
			</view>
			<view>
				<view class="used-msg-list" v-if="!isEmpty">
					<view v-for="item in conversationList" :key="item.conversationID" @tap="handleRoute(item.conversationID)">
						<used-conversation-item :data-type="item.type" :conversation="item"></used-conversation-item>
					</view>
				</view>
				<!-- 空白页 -->
				<u-empty v-if="isEmpty" :text="nonewsText" mode="message"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import logger from '@/utils/logger';
	import {mapState} from "vuex";
	import {genTestUserSig} from '@/debug/GenerateTestUserSig.js';
	import {timLogin} from '@/utils/tim.js'
	import {isEmpty,isNotEmpty} from '@/utils/utils';
	import jwt from '@/utils/jwt.js'
	import {newsCount} from '@/common/http.api.js'
	const app = getApp();
	export default {
		data() {
			return {
				type:"warning",
				offsetData:[0,-10],
				userAddConversationList:[],
				userList:[],
				isEmpty:true,
				isLogin: false,
				systemmsgText:'',
				onteractivemsgText:'',
				nonewsText:'',
				ordermsgText:'',
				count:{
					total:0,
					orderNum:0,
					interactNum:0,
					sysNum:0
				}
			};
		},
		watch: {
			isSDKReady(val) {
				//isSDKReady == true 请求会话列表
				if (val) {
					this.getConversationList()
				}
			},
			conversationList(val){
				if(val.length > 0){
					this.isEmpty = false;
				}
				this.getUserInfo(val)
			}
		},
		computed: {
			...mapState({
				timLogin: state => state.tim.timLogin,
				isSDKReady: state => state.tim.isSDKReady,
				conversationList: state => state.tim.conversationList,
			})
		},
		onShow() {
			this.isLogin = jwt.getLogin();
			if(this.isLogin){
				console.info("登陆tim")
				timLogin();
				this.getNewsCount();
			}
			if (this.isSDKReady) {
				this.getConversationList()
			}
			this.refresh();
		},
		onLoad(){

		},
		methods:{
			refresh(){

			},
			getNewsCount(){
				const authToken = jwt.getAccessToken();
				newsCount({header: {'Authorization': authToken ? `Bearer ${authToken}` : ''}}).then((res)=>{
					if(res.code === 0){
						this.$nextTick(() => {
						   this.count.total = parseInt(res.data.total);
						   this.count.orderNum = parseInt(res.data.orderNum);
						   this.count.interactNum = parseInt(res.data.interactNum);
						   this.count.sysNum = parseInt(res.data.sysNum);
						})
					}
				  }).catch(error=>{
					console.error(error)
				  })
			},
			handleRoute(id) {
				const url = `/pages/common/chat/chat?conversationID=${id}&chatMode=1`;
				uni.navigateTo({
					url
				});
			},
			getConversationList() {
				uni.$TUIKit.getConversationList().then(imResponse => {
					logger.log(`TUI-conversation | getConversationList | getConversationList-length: ${imResponse.data.conversationList.length}`);
					let conversationList = imResponse.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
					if (conversationList.length) {
						//将返回的会话列表拼接上 用户的基本资料  
						//说明：如果已经将用户信息 提交到tim服务端了 就不需要再次拼接
						this.$store.commit("updateConversationList", conversationList);
					}
				});
			},
			//根据消息列表请求聊天对象的用户信息 并完成数据拼接
			getUserInfo(conversationList) {
				this.userAddConversationList = []
				conversationList.forEach(item => {
					let obj = {}
					obj.conversation = item
					this.userList.forEach(item1 => {
						if (item.toAccount == item1.userId) {
							obj.user = item1
						}
					})
					this.userAddConversationList.push(JSON.parse(JSON.stringify(obj)))
				})
			},
		}
	}
</script>

<style lang="scss">
.used-badge{
	position: relative
}
.used-msg-page{
	padding: 20rpx;
}
.used-msg-container{
	.used-msg-box{
		background-color: $main-color-auxiliary-one;
		padding: 20rpx;
		border-radius: 20rpx;
		.used-msg-box-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
		}
	}
}
.used-msg-list{
	padding: 20rpx;
	margin-top: 20rpx;
	background-color: $main-color-auxiliary-one;
	border-radius: 20rpx;
	.used-msg-list-item{
		display: flex;
		justify-content: space-between;
		.used-msg-list-item-wrap{
			flex: 3;
			padding: 0 0 0 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.used-msg-list-item-content{
				display: flex;
				.used-msg-list-item-content-left{
					flex: 3;
				}
				.used-msg-list-item-content-right{
					
				}
			}
		}
	}
}
</style>